<!-- AddressSelect.vue -->
<template>
  <div>
    <a-row :gutter="24">
      <a-col :span="8">
        <a-select placeholder="请选择省" :style="{ width: '100%' }" v-model="selectedProvince"
          @change="handleProvinceChange">
          <a-option v-for="province in provinceList" :key="province.value" :value="province.value">{{ province.label
          }}</a-option>
        </a-select>
      </a-col>
      <a-col :span="8">
        <a-select placeholder="请选择市" :style="{ width: '100%' }" v-model="selectedCity" @change="handleCityChange">
          <a-option v-for="city in cityList" :key="city.value" :value="city.value">{{ city.label }}</a-option>
        </a-select>
      </a-col>
      <a-col :span="8">
        <a-select placeholder="请选择区" :style="{ width: '100%' }" v-model="selectedCounty">
          <a-option v-for="county in countyList" :key="county.value" :value="county.value">{{ county.label }}</a-option>
        </a-select>
      </a-col>
    </a-row>
  </div>
</template>
  
<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { areaCodeGetList } from "@/api/demand"; 

const props = defineProps<{
  modelValue: {
    province: string;
    city: string;
    county: string;
  };
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: { province: string; city: string; county: string; provinceLabel: string; cityLabel: string; countyLabel: string }): void;
}>();

const provinceList = ref<{ value: string; label: string }[]>([]);
const cityList = ref<{ value: string; label: string }[]>([]);
const countyList = ref<{ value: string; label: string }[]>([]);

const selectedProvince = ref(props.modelValue.province);
const selectedCity = ref(props.modelValue.city);
const selectedCounty = ref(props.modelValue.county);

const provinceLabelMap = ref<{ [key: string]: string }>({});
const cityLabelMap = ref<{ [key: string]: string }>({});
const countyLabelMap = ref<{ [key: string]: string }>({});

watch(
  () => [selectedProvince.value, selectedCity.value, selectedCounty.value],
  ([province, city, county]) => {
    emit('update:modelValue', {
      province,
      city,
      county,
      provinceLabel: provinceLabelMap.value[province] || '',
      cityLabel: cityLabelMap.value[city] || '',
      countyLabel: countyLabelMap.value[county] || ''
    });
  }
);

const handleProvinceChange = async (value: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]): Promise<void> => {
  const res = await areaCodeGetList({ pcode: value });
  cityList.value = res.data.map(item => ({ value: item.code, label: item.name }));
  countyList.value = []; // 清空区列表
  selectedCity.value = ''; // 清空市选择
  selectedCounty.value = ''; // 清空区选择

  // 更新省的 label 映射
  provinceLabelMap.value = provinceList.value.reduce((acc, cur) => {
    acc[cur.value] = cur.label;
    return acc;
  }, {} as { [key: string]: string });

  // 清空区的 label 映射
  countyLabelMap.value = {};
};

const handleCityChange = async (value: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]): Promise<void> => {
  const res = await areaCodeGetList({ pcode: value });
  countyList.value = res.data.map(item => ({ value: item.code, label: item.name }));
  selectedCounty.value = ''; // 清空区选择

  // 更新市的 label 映射
  cityLabelMap.value = cityList.value.reduce((acc, cur) => {
    acc[cur.value] = cur.label;
    return acc;
  }, {} as { [key: string]: string });

  // 更新区的 label 映射
  countyLabelMap.value = countyList.value.reduce((acc, cur) => {
    acc[cur.value] = cur.label;
    return acc;
  }, {} as { [key: string]: string });
};

onMounted(async () => {
  const res = await areaCodeGetList('');
  provinceList.value = res.data.map(item => ({ value: item.code, label: item.name }));

  // 初始化省的 label 映射
  provinceLabelMap.value = provinceList.value.reduce((acc, cur) => {
    acc[cur.value] = cur.label;
    return acc;
  }, {} as { [key: string]: string });
});
</script>